<template>
  <div class="left">
    <input type="text" v-model="haNum" style="visibility: hidden; display: none" />
    <div class="card">
      <div class="card_t">
        <img src="@/assets/images/icon_menu.png" alt="" class="img" />
        <span>{{ $t("mem-t1") }}</span>
      </div>
      <div class="box">
        <ul class="card_list">
          <li class="item hand" :class="{ active: active(item.path) }" v-for="(item, idx) in list" :key="idx">
            <span class="title">
              <span @click.stop="openPage(item.path)" >{{ item.title }}</span>
              <img src="@/assets/images/icon_down.svg" class="img" :class="listCollapse[idx] == 1 ? 'isActive' : ''" v-if="item.children && item.children.length > 0" @click.stop="toggleCollapse(idx)"/>
            </span>
            <ol class="second" v-if="listCollapse[idx] == 1 && item.children && item.children.length > 0">
              <li class="second_i" :class="{ active: active(item2.path) }" @click.stop="openPage(item2.path)" v-for="(item2, idx2) in item.children" :key="idx2">
                {{ item2.title }}
              </li>
            </ol>
          </li>
          <li class="item hand quit">
            <span class="title" @click.stop="quit">
              <span>{{ $t("login-quit") }}</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { memberMenuList, memberMenuListEn } from "@/libs/menu";
export default {
  computed: {
    list() {
      return this.localeCn ? memberMenuList : memberMenuListEn;
    },
    active() {
      return (v) => {
        if (!v) return;
        return this.$route.path == v;
      };
    },
  },
  data() {
    return {
      collapse: false,
      listCollapse: [],
      haNum: 0,
    };
  },
  mounted() {
    this.listCollapse = new Array(this.list.length).fill(1);
  },
  methods: {
    toggleCollapse(idx) {
      if (this.listCollapse[idx] != 1) {
        this.listCollapse[idx] = 1;
      } else {
        this.listCollapse[idx] = 0;
      }
      this.haNum++;
    },
    openPage(path) {
      this.$router.push({
        path: path,
      });
      this.$store.commit("setShowMemberMenuWap", false);
    },
    quit() {
      this.$confirm(this.$t("login.tip-message"), this.$t("login.tip"), {
        confirmButtonText: this.$t("login.ok"),
        cancelButtonText: this.$t("login.cancel"),
        type: "warning",
      })
        .then(() => {
          this.logout();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.left {
  .card {
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 40px;
    height: 80vh;
    position: relative;

    // 左侧顶部
    &_t {
      height: 60px;
      padding: 0 30px;
      display: flex;
      align-items: center;
      font-size: 18px;
      color: #fff;
      background: #e35191;

      .img {
        width: 20px;
        margin-right: 20px;
      }
    }

    .box {
      height: calc(80vh - 100px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 20px;
    }

    // 左侧列表
    &_list {
      $h: 50px;
      $bor-c: #f6f7f8;

      .item {
        font-size: 16px;
        color: #4f4f4f;
        line-height: $h;
        &.quit {
          opacity: 0.8;
        }

        .title {
          padding: 0 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;

          .img {
            width: 18px;
            transition: all 0.2s linear;

            &.isActive {
              transform: rotate(180deg);
            }
          }
          &::before {
            position: absolute;
            top: 15px;
            left: 20px;
            content: "";
            // display: inline-block;
            display: none;
            height: 1em;
            width: 2px;
            background: #e35191;
          }
          &:hover {
            &::before {
              display: inline-block;
            }
          }
        }

        &.active {
          background: #e35191;
          color: #fff;
        }
      }

      // 二级菜单
      .second {
        padding-left: 0px;

        &_i {
          height: $h;
          line-height: $h;
          font-size: 14px;
          color: #9a9898;
          padding: 0 30px;

          &.active,
          &:hover {
            background: #e35191;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media (max-width: 767px) {
  .left {
    margin: 0 20px;

    .card {
      margin-bottom: 0;
      height: auto;
      .box {
        height: auto;
      }
      &_t {
        height: 40px;
        font-size: 14px;
        .img {
          width: 20px;
        }
      }

      &_list {
        $h: 40px;

        .item {
          line-height: $h;
          font-size: 16px;
          .title {
            padding: 0 20px;
            .img {
              width: 14px;
            }
            &::before{
              top:10px;
              left:12px;
            }
          }
        }

        .second {
          &_i {
            padding: 0 20px;
            height: $h;
            line-height: $h;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
